<!--
 * 任务发布组件
 * |-- div(#task-issue-container) 总容器
 *   |-- Input(.task-issue-form-items) 文本框，填写任务主题/标题
 *   |-- br 换行
 *   |-- Input(.task-issue-form-items) 文本域，填写任务描述
 *   |-- Issue_Attendee(.task-issue-form-items) 人员选择组件，用于指定需要完成任务的对象
 *   |-- Image_Loader(.task-issue-form-items) 图片选择组件，用于上传所需图片
 *   |-- DatePicker(.task-issue-form-items) 截止日期选择器
 *   |-- br 换行
 *   |-- Button(.task-issue-form-items) 发布任务按钮
 -->
<template>
    <div id="task-issue-container">
        <Input 
            class="task-issue-form-items" 
            v-model="subject" 
            placeholder="填写主题" 
            style="width: 80%" />
        <br>
        <Input 
            class="task-issue-form-items" 
            v-model="discribe" 
            type="textarea" 
            :rows="4" 
            :autosize="{ minRows: 4, maxRows: 4 }" 
            placeholder="填写描述" 
            style="width: 80%" />
        <Issue_Attendee class="task-issue-form-items"/>
        <Image_Loader class="task-issue-form-items" @on-change="imgChange"/>
        <DatePicker 
            class="task-issue-form-items" 
            :options="options" type="date" 
            placeholder="截止日期" 
            style="width: 200px" 
            @on-change="changeDate"/>
        <br>
        <Button 
            class="task-issue-form-items" 
            type="primary" 
            @click="issue()">发布任务</Button>
    </div>
</template>

<script>

import local_script from "@task/js/util";
import task_request from "@/axios/task";
import Issue_Attendee from "@task/vue/issue-task-attendee";
import Image_Loader from "@iload/vue";

export default {
    data() {
        return {
            // 主题
            subject: "",
            // 描述
            discribe: "",
            // 缩略图列表
            previewImg: [],
            // 截止时间
            date: "",
            // 禁选的日期
            options: {
                disabledDate (date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            }
        }
    },
    methods: {
        /**
         * 当截止日期发生变化时
         * @param {String} v 新的日期
         */
        changeDate(v) {
            this.date = v;
        },
        /**
         * "发布按钮" 的点击事件
         */
        issue() {
            task_request.issue_task(this.subject, this.discribe, 201831221001, this.date, this.previewImg);
        },
        /**
         * 当待显示的图片数组发生变化时
         * @param {Array} v 新的图片数组
         */
        imgChange(v) {
            this.previewImg = v;
        }
    },
    components: {
        Issue_Attendee,
        Image_Loader
    }
}
</script>

<style lang="scss">
@import "@task/scss/issue-task-index.scss";
</style>